<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>街头篮球周边商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/home.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/datail.css">
    <script src="js/move.1.2.js"></script>
    <script src="font/iconfont.js"></script>

</head>

<body>
    <div class="onlinewrap">
        <div class="topkefu">
            <img src="images/kefjimg.png" alt="" srcset="">

        </div>
        <div class="botkefu">

        </div>


    </div>
    <div class="top_wrap">
        <div class="clearfix w980">
            <div class="fl logo_wrap ">

            </div>
            <div class="top_right">
                <ul class="fr nav_menu">
                    <li><a href="index.html" onClick="login();">已登录</a></li>
                    <li><span class="navLine">|</span></li>
                    <li><a href="#">我的订单</a></li>
                    <li><span class="navLine">|</span></li>
                    <li><a href="#">我的荣誉</a></li>
                    <li><span class="navLine">|</span></li>
                    <li><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xin2"></use>
                        </svg></li>
                    <li><a href="#">我的收藏</a></li>
                    <li><span class="navLine">|</span></li>
                    <li><a href="#">购物车</a></li>


                </ul>
            </div>

        </div>

    </div>
    <div class="mainContent w980">

        <div class="innerTitle">
            <h2>产品分类</h2>

        </div>
        <p class="innerTopLink">
            <a href="index.html">首页</a>
            ">周边所有产品列表
        </p>
        <div class="product_intro_top clearfix">
            <div class="product_img fl" id="product">
                <div class="touch">
                    <img src="" alt="" srcset="" id="smallimg">
                    <span class="gray-box" style="pointer-events: none;"></span>

                </div>
                <ul class="btn">
                    <li><img src="" alt="" class="list-pics"></li>
                    <li><img src="" alt="" class="list-pics"></li>
                    <li><img src="" alt="" class="list-pics"></li>
                    <li><img src="" alt="" class="list-pics"></li>
                </ul>
                <div class="show">
                    <img src="" alt="">
                </div>
                <!-- 商品右边 -->
                <div class="product_intro_right fl">
                    <!-- //动态 -->
                    <h3 id="goods_name"></h3>
                    <p class="sim_intro">新品正式发售</p>
                    <p class="product_price" id="ad_product">
                        "价格:"
                        <b id="goods_splic"></b>
                    </p>
                    <div class="freight_wrap clearfix">
                        <span class="fl big">运费:</span>
                        <span class="fl">
                            "上海 至"
                            <em id="prov">上海</em>
                            "-"
                            <em id="city">上海市</em>
                            "-"
                            <em id="dist">黄浦区</em>

                        </span>
                        <a class="fl icon show"></a>
                        <span class="fl" id="yunfri">快递10元</span>

                    </div>
                    <div class="model" id="model">
                        <b>型号:</b>
                        <span class="current">M</span>
                        <span>L</span>
                        <span>XL</span>
                        <span>XXL</span>
                    </div>
                    <div id="pro_color">
                        <b>颜色:</b>
                        <span class="current">战神归来</span>

                    </div>
                    <div class="quantity_wrap clearfix">
                        <span class="fl big">购买数量：</span>
                        <a class="fl count_minus" href="javascript:void(0)">-</a>
                        <p class="fl"><input type="text" value="1" id="buyCount" class="shop_count"
                                readonly="readonly" />
                        </p>
                        <a class="fl count_plus" href="javascript:void(0)">+</a>

                        <span id="count" class="fl">（剩余库存14件）</span>

                    </div>
                    <div class="shopping_btn clearfix" id="buy">
                        <a class="fl common_link1" id="edit" href="shopcart.html" onclick="edit();">立刻购买</a>
                        <a class="fr common_link2" id="shopcart" href="shopcart.html" onclick="edit();">放入购物车</a>
                    </div>

                </div>

`
            </div>
        </div>
    </div>
    <!--通用底部-->
    <div class="clearfix bottomDiv">
        <div class="w980">
            <ul class="clearfix bottom_ul">
                <li class="fl">
                    <h3>购物指南</h3>
                    <a href="" target="_blank">购物常见问题</a>
                    <a href="" target="_blank">支付方式</a>
                </li>
                <li class="fl">
                    <h3>配送方式</h3>
                    <a href="" target="_blank">配送范围</a>
                    <a href="" target="_blank">快递费用标准</a>
                </li>
                <li class="fl">
                    <h3>售后服务</h3>
                    <a href="" target="_blank">退换货流程</a>
                    <a href="" target="_blank">退换货政策</a>
                </li>
                <li class="fl">
                    <h3>关注我们</h3>
                    <a href="index.html" target="_blank">公司官网</a>
                </li>
                <li class="fl contact">
                    <h3>客服中心</h3>
                    <h3>021-34289630</h3>
                    <a>周一至周日 9:00--21:00</a>
                </li>
            </ul>
            <div class="company_info">
                <a class="ht png24 t2cn_logo" target="_blank" href=""></a>
                <p style="color:white;">抵制不良游戏 | 拒绝盗版游戏 | 注意自我保护 | 谨防受骗上当 | 适度游戏益脑 | 沉迷游戏伤身 | 合理安排时间 | 享受健康生活</p>
                <p>上海天游软件有限公司 《网络文化经营许可证》编号：沪网文[2018]9896-616号 《增值电信业务经营许可证》 编号：沪B2-20050044</p>
                <p>《互联网出版许可证》编号：新出网证（沪）字34号 文化部网络游戏举报和联系电子信箱：wlwh@vip.sina.com 沪公网安备:3101010010</p>
                <p>沪ICP备10035374号-2 《街头篮球》批准文号：文网测字（2006）018号 《街头篮球》版号： 新出音管[2005] 415号
                    <a href="" target="_blank">关于我们</a> <a href="" target="_blank">联系我们</a> <a href=""
                        target="_blank">家长监护工程</a>
                </p>

            </div>
        </div>
    </div>



</body>

</html>
<script src="js/jQuery.js"></script>
<script>
    //放大镜部分


    window.onload = function () {
        $(".touch").onmouseover = function () {
            //console.log(1); 测试结束;
            $(".gray-box").style.display = "block";
            var target = $(".touch").offsetLeft + $(".touch").offsetWidth / 10;
            $(".show").style.width = 0;
            $(".show").style.height = 0;
            $(".show").style.right = 0;
            move($(".show"), { right: target, width: 400, height: 500 });
            $(".show").style.display = "block";
        }

        $(".touch").onmouseout = function () {

            //console.log(1); 测试结束;

            $(".gray-box").style.display = "none";
            $(".show").style.display = "none";
        }

        $(".touch").onmousemove = function (event) {
            var evt = event || window.event;
            var left = evt.offsetX - $(".gray-box").offsetWidth / 2;
            var top = evt.offsetY - $(".gray-box").offsetHeight / 2;
            left = left <= 0 ? 0 : left;
            if (left >= $(".touch").offsetWidth - $(".gray-box").offsetWidth) {
                left = $(".touch").offsetWidth - $(".gray-box").offsetWidth;
            }//右侧边界检测;
            //  console.log(evt.offsetX)
            top = top <= 0 ? 0 : top;
            if (top >= $(".touch").offsetHeight - $(".gray-box").offsetHeight) {
                top = $(".touch").offsetHeight - $(".gray-box").offsetHeight;
            }//下部边界检测;
            $(".gray-box").style.left = left + "px";
            $(".gray-box").style.top = top + "px";
            //让右侧动起来;
            showImg.style.left = -left * 5 + "px";
            showImg.style.top = -top * 5 + "px";
        }
        //右侧;
        var showImg = $(".show").children[0];
        var smallImg = $(".touch").children[0];
        //设置宽高;
        showImg.style.width = smallImg.offsetWidth * 5 + "px";
        showImg.style.height = smallImg.offsetHeight * 5 + "px";
        var aLi = $(".btn").children;

        for (var i = 0; i < aLi.length; i++) {

            aLi[i].onclick = function () {

                //console.log(this.children[0].src);

                $(".touch").children[0].src = this.children[0].src;
                $(".show").children[0].src = this.children[0].src;
            }

        }

    }

    function $(select) {

        return document.querySelector(select);

    }
    // console.log(1)
    //发送ajax请求
    function indexGoods() {
        // console.log(2)
        let goodsNum = self.location.href.split("=")[1];
        //发送请求获取信息
        let xhr = new XMLHttpRequest();
        xhr.open("get", "datail.php?goods_id=" + goodsNum, true);
        xhr.send();
        xhr.onreadystatechange = function () {
            if (xhr.status == 200 && xhr.readyState == 4) {

                fun(xhr.responseText);
            }
        }

    }
    let smlltu = document.querySelectorAll(".list-pics");
    indexGoods();
    
    function fun(resText) {
        let json = JSON.parse(resText);
        let arrImg;
        // console.log(4)
        for (let index in json) {
            // console.log(index)

            if (index === "goods_img") {
                arrImg = json[index].split(",");
                // console.log(arrImg)
                // console.log(arrImg)
                //初始化li里的图片
                for (let i = 0; i < arrImg.length; i++) {
                    // $(".btn>li").eq(i).css({
                    //     // "src":"images/"
                    // })

                    for (let i = 0; i < smlltu.length; i++) {
                        smlltu[i].src = arrImg[i];
                    }
                    // smlltu.forEach(index => {
                    //     // console.log("item",item)
                    //     smlltu[index].src = "images/QC0038_2.jpg";  

                    // })
                    // console.log(smlltu.style.src)       
                    //初始化small img
                  
                    // console.log(osmallimg)



                } 
                
                 let osmallimg = document.getElementById("smallimg");
                let oshow = document.getElementsByClassName("show");
                // console.log(oshow)
                osmallimg.src = arrImg[0];
                // console.log(osmallimg)

            }
            //将数据库里的值取出来赋给对应的html元素  
            if (index === "goods_name") {
                let oGoods = document.getElementById("goods_name");
                oGoods.innerHTML = json["goods_name"];
                // $("#goods_name").html(json["goods_name"]);
            }
            if (index === "goods_splic") {

                // $("#goods_splic").html(json["gonds_splic"]);
                let oGood = document.getElementById("goods_splic");
                oGood.innerHTML = json["goods_splic"];
                // console.log(oGood);
            }


        }
    }



</script>